<template>
	<view class="container">
		<view class="user">
			<image class="avatar" />
			<view class="info">
				<text class="name">数码暴龙爆炸</text>
				<text class="days">已打卡<text class="day">{{day}}</text>天</text>
			</view>
			<uni-icons class="compose" type="compose" size="30" @click="toChangeInfo"/>
		</view>
		<view class="book">
			<view class="myBook">
				<text class="title">我的课本</text>
			</view>
			<view class="details">
				<view class="imgBox">
					<image class="bookCover" />
				</view>
				<view class="progressView">
					<text class="bookTitle">{{book.title}}</text>
					<progress class="progressBar" 
						:percent="book.learned/book.total*100"
						activeColor="#838ec7"
					></progress>
					<text class="progressStatus">进度:{{book.learned}}/{{book.total}}</text>
				</view>
			</view>
			<view class="clickView">
				<text class="clickText" @click="toChangeBook">点击更换课本</text>
			</view>
		</view>
		<view class="myLearn">
			<view class="titleView">
				<text class="title">我的学习</text>
			</view>
			<view class="content">
				<view class="details">
					<view class="learn">今日已学:<text>{{learnOfDay.learned}}</text>词</view>
					<text class="learn">今日未学:<text>{{learnOfDay.toLearn}}</text>词</text>
					<text class="learn">今日需学:<text>{{learnOfDay.needLearn}}</text>词</text>
				</view>
				<view class="circleProgress"></view>
			</view>
			
		</view>
		<view class="setting">
			<view class="tab" v-for="(item,index) in tabs" :key="index" @click="toSetAbout(index)">
				<text class="settingKind">{{item.name}}</text>
				<uni-icons type="forward" size="30" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId:10,
				tabs:[
				{
					name:"学习设置",
				},
				{
					name:"关于我们",
				}
				],
				day: 0,
				book: {
					title: "十天搞定六级词汇便携版",
					cover: null,
					total: 2460,
					learned: 1230,
				},
				learnOfDay: {
					learned: 30,
					toLearn: 70,
					needLearn: 100,
				}
			}
		},
		methods: {
			drawerCicle(percent){
				let canvas = document.getElementById('canvas');
				canvas.width = document.querySelector('div')?.getBoundingClientRect()?.width;
				canvas.height = document.querySelector('div')?.getBoundingClientRect()?.height;
				// 1、确定组件的圆心位置
				let xCenter = canvas.width / 2;
				let yCenter = canvas.height / 2;
				// 2、拿到绘画上下文
				let ctx = canvas.getContext('2d');
				// 3、开启绘画路径
				ctx.beginPath();
				// 4、确定画笔颜色
				ctx.strokeStyle = '#ccc';
				// 5、设置画笔粗细
				ctx.lineWidth = 10;
				// 6、确定圆弧半径
				let radius = (canvas.width - ( 2 * ctx.lineWidth ) ) / 2;
				// 7、调用arc绘制圆弧
				ctx.arc(xCenter, yCenter, radius, 0, 2 * Math.PI, false);
				// 8、将圆弧上的点连线
				ctx.stroke();
				// 9、关闭路径
				ctx.closePath();
				
				
				 // 画进度圆弧
				ctx.beginPath();
				ctx.strokeStyle = 'orange';
				ctx.lineWidth = 10;
				ctx.arc(xCenter, yCenter, radius, 1.5*Math.PI, (1.5*Math.PI) + (percent * 2 * Math.PI), false);
				ctx.stroke();
				ctx.closePath();
			},
			toChangeInfo(){
				uni.navigateTo({
					url:'/pages/user/change-user-info?id='+this.userId
				})
			},
			toSetAbout(index){
				switch(index){
					case 0:{
						uni.navigateTo({
							url:'/pages/user/learn-setting'
						})
						break
					}
					case 1:{
						uni.navigateTo({
							url:'/pages/user/about'
						})
					}
				}
			},
			toChangeBook(){
				uni.navigateTo({
					url:"/pages/user/change-book"
				})
			}
		}
	}
</script>

<style>
	.container {
/* 		display: flex;
		flex-direction: column;
		align-items: center; */
		/* 版心 */
		width: 21.25rem;
		margin: 0 auto;
	}
	.user {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 2rem;
		width: 21.25rem;
		height: 6.25rem;
		line-height: 1.25rem;
		border-radius: 0.31rem;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 0.88rem;
		text-align: center;
		font-family: Arial;
	}
	.avatar {
		margin-left: 2rem;
		width: 3.13rem;
		height: 3.13rem;
		border-radius: 50%;
		background-color: var(--theme--color);
	}
	.info {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-left: 2rem;
	}
	.name {
		margin-bottom: 0.5rem;
	}
	.days {
		margin-top: 0.5rem;
	}
	.day {
		margin-left: 1rem;
		margin-right: 1rem;
		margin-top: 1rem;
		width: 2.13rem;
		height: 2.5rem;
		color: var(--theme--color);
		font-size: 1.75rem;
		text-align: center;
		font-family: PingFangSC-regular;
	}
	.compose {
		margin-left: 4rem;
		margin-top: 1rem;
		margin-bottom: 4rem;
		width: 1.44rem;
		height: 1.44rem;
	}
	
	.book {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-top: 2rem;
		width: 19.25rem;
		height: 7.5rem;
		padding: 1rem;
		border-radius: 0.31rem;
		background-color: rgba(255, 255, 255, 1);
	}
	.myBook {
		text-align:left;
		margin-bottom: 0.8rem;
	}
	.title {
		color: rgba(51, 51, 51, 1);
		font-size: 0.88rem;
		font-family: PingFangSC-regular;
	}
	 .imgBox{
		 margin-right: 1rem;
	 }
	.bookCover {
		width: 3.63rem;
		height: 4.38rem;
		background-color: var(--theme--color);
	}
	.details {
		display: flex;
		align-items: center;
	}
	
	.details .progressView{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 3.8rem;
	}
	.bookTitle {
		color: rgba(51, 51, 51, 1);
		font-size: 0.88rem;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	.progressBar {
		width: 11.69rem;
	}
	.progressStatus {
		color: var(--theme--color);
		font-size: 0.63rem;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	.clickView {
		text-align: right;
		
	}
	.clickText {
		/* TODO 取消内边距 */
		color: rgba(115, 113, 113, 1);
		font-size: 0.63rem;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	.myLearn {
		display: flex;
		flex-direction: column;
		margin-top: 2rem;
		width: 19.25rem;
		height: 5.88rem;
		border-radius: 0.31rem;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 0.88rem;
		text-align: center;
		font-family: Arial;
		padding: 1rem;
	}
	.myLearn .titleView {
		text-align: left;
		margin-bottom: 0.5rem;
	}
	.myLearn .content{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
	.myLearn .details {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		width: 10.75rem;
		height: 4.13rem;
		color: rgba(115, 113, 113, 1);
		font-size: 0.75rem;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	
	.myLearn .circleProgress {
		width: 4.63rem;
		height: 4.63rem;
		border-radius: 50%;
		background-color: var(--theme--color);
		margin-right: 3rem;
	}
	.learn{
		
	}
	.learn > text{
		
	}
	
	.setting {
		display: flex;
		flex-direction: column;
		margin-top: 2rem;
		width: 21.25rem;
		height: 7.88rem;
		border-radius: 0.31rem;
		background-color: rgba(255,255,255,1);
	}
	.setting .tab {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 2.63rem;
		padding: 0 1rem;
		border-bottom: 0.06rem solid rgba(187,187,187,0.26);
	}
	.setting .settingKind {
		color: rgba(51, 51, 51, 1);
		font-size: 0.88rem;
		text-align: left;
		font-family: PingFangSC-regular;
	}
</style>
